<template>
	<div id="tagbody">
		<h1 style="font-size: 30px;">标签管理</h1>
		<el-row :gutter="20">
			<el-col :span="18" :xs="16">
				<el-input v-model="tagName" name="tagName" maxlength="20" show-word-limit></el-input>
			</el-col>
			<el-col :span="4">
				<el-button @click="addTag">添加标签</el-button>
			</el-col>
		</el-row>

		<el-row class="taglist">
			<el-tag v-for="(tag,index) in tags" type="info" :key="tag.tagName">
				<span>{{tag.tagName}}</span>
				<button @click="opendel(tag.tagId,index)"><span class="el-icon-delete"></span></button>
				<button @click="openUpdate(tag.tagName,tag.tagId)"><span class="el-icon-edit"></span></button>
			</el-tag>
		</el-row>



	</div>
</template>

<script>
	export default {
		name: 'Tag',
		data() {
			return {
				tags: [],
				tagName: '',
			}
		},
		methods: {
			loadTag() {
				this.axios.get("/tag/select")
					.then((res) => {
						this.tags = res.data.data;
					})
			},
			delTag(id, index) {
				this.axios.get("/tag/delete/" + id)
					.then((res) => {
						if (res.data.success) {
							this.tags.splice(index, 1);
							this.$message({
								type:'success',
								message:res.data.msg,
								showClose:true
							});
							this.loadTag();
						} else {
							this.$message({
								type:'error',
								message:res.data.msg,
								showClose:true
							});
						}
					})
			},
			addTag() {
				let formdata = new FormData();
				if (this.tagName == "") {
					this.$message({
						type:'error',
						message:"请填写标签",
						showClose:true
					});
				} else {
					formdata.append('tagName', this.tagName);
					this.axios.post("/tag/add", formdata)
						.then((res) => {
							if (res.data.success) {
								this.$message({
									type:'success',
									message:res.data.msg,
									showClose:true
								});
								this.tags.splice(0, 0, this.tagName);
								this.loadTag();
							} else {
								this.$message({
									type:'error',
									message:res.data.msg,
									showClose:true
								});
							}
						})
				}
			},
			updateTag(tagName, tagId) {
				let data = new FormData();
				data.append("tagId", tagId);
				data.append("tagName", tagName);
				this.axios.post("/tag/update", data)
					.then((res) => {
						if (res.data.success) {
							this.$message({
								type:'success',
								message:res.data.msg,
								showClose:true
							});
							this.loadTag();
						} else {
							this.$message({
								type:'error',
								message:res.data.msg,
								showClose:true
							});
						}
					});
			},
			openUpdate(tagName, tagId) {
				this.$prompt("请输入新的标签名", "修改标签名", {
					confirmButtonText: '修改',
					cancelButtonText: '取消'
				}).then(({
					value
				}) => {
					if (value == tagName) {
						this.$message({
							type:'error',
							message:"新标签名与旧标签名重复",
							showClose:true
						});
						return;
					} 
					if(value == null || value == ""){
						this.$message({
							type:'error',
							message:"请填写新标签名",
							showClose:true
						});
						return;
					}
					else {
						this.updateTag(value, tagId);
					}
				}).catch(()=>{
					this.$message({
						type:'info',
						message:"已取消修改",
						showClose:true
					});
				})
			},
			opendel(tagId, index) {
				this.$confirm("此操作会永久删除该标签，是否继续？", "提示", {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.delTag(tagId, index);
				}).catch(() => {
					this.$message({
						type:'info',
						message:"已取消删除",
						showClose:true
					});
				});
			}
		},
		created() {
			this.loadTag();
		}
	}
</script>

<style>
	
	#tagbody .el-row{
		margin: 20px 0px 20px 0px;
	}
	
	#tagbody .el-tag button{
		background-color: inherit;
		border: none;
		cursor: pointer;
	}
	
	#tagbody .el-tag {
		margin: 0px 10px 10px 0px;
		font-size: 15px;
		cursor: pointer;
		background-color: #C2E7B0;
		color: #444400;
	}
	
	#tagbody .el-tag:hover{
		box-shadow: 0px 0px 20px -10px rgba(0,0,0,0.59);
		transition: all 0.3s;
	}
	
	#tagbody .el-tag .el-icon-delete:hover{
		color: red;
	}
	
	#tagbody .el-tag .el-icon-edit:hover{
		color: gold;
	}
</style>
